<template>
  <div class="user-status">
    <div v-if="isLoggedIn" class="user-info">
      <img :src="userAvatar" alt="avatar" class="user-avatar" />
      <div class="user-details">
        <div class="user-name">{{ userName }}</div>
        <div class="user-id">ID: {{ userId }}</div>
      </div>
      <button class="logout-btn" @click="handleLogout">登出</button>
    </div>
    <div v-else class="login-prompt">
      <span class="prompt-text">请先登录</span>
      <button class="login-btn" @click="$emit('login')">登录</button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { isLoggedIn, getUserInfo, logout } from '../utils/auth.js'

const emit = defineEmits(['login', 'logout'])

const userInfo = computed(() => getUserInfo())
const userId = computed(() => userInfo.value.id)
const userName = computed(() => userInfo.value.name || userInfo.value.username || '用户')
const userAvatar = computed(() => userInfo.value.avatar || 'https://img2.baidu.com/it/u=3785284672,2189629152&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200')

const handleLogout = async () => {
  try {
    await logout()
    emit('logout')
  } catch (error) {
    console.error('登出失败:', error)
  }
}
</script>

<style scoped>
.user-status {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.user-details {
  flex: 1;
}

.user-name {
  font-weight: 600;
  color: #333;
  font-size: 16px;
}

.user-id {
  color: #666;
  font-size: 12px;
  margin-top: 2px;
}

.logout-btn {
  background: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.logout-btn:hover {
  background: #ff7875;
}

.login-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.prompt-text {
  color: #666;
  font-size: 14px;
}

.login-btn {
  background: #00b2b1;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.login-btn:hover {
  background: #009a99;
}
</style> 